import React ,{Component}from 'react';
import detail from './Detail.module.css'
import { Button } from 'antd';
import { Carousel } from 'antd';
import*as api from '../until/getProduct.js'
export default class Detail extends Component{
	constructor(props) {
	    super(props)
		this.state={
			detail:''
		}
	}
	back(){
		this.props.history.push({pathname:'/hotselling',state:{category:'lyf'}})
	}
	add(){
		let id=this.state.detail._id
		api.addcart({
			product:id,quantity:1
		}).then(res=>{
			console.log(res.data)
			if(res.data.code==='success'){
				alert(res.data.message)
			}
		})
		
	}
	buy(){
		if(localStorage.getItem('token')){
			console.log(1)
		}else{
			this.props.history.push('/login')
		}
	}
	componentDidMount(){
		window.scrollTo(0,0)
		let id=this.props.location.state.id
		api.getdetail(id).then(res=>{
			this.setState({detail:res.data})
		})
	}
	render(){
		return(
		<div>
		<div className='w'>
			<h2 className={detail.tit}>{this.state.detail.name}</h2>
			<div className={detail.left}>
				<img src={this.state.detail.coverImg} alt=''/>
				<img src={this.state.detail.coverImg} alt=''/>
				<img src={this.state.detail.coverImg} alt=''/>
				<img src={this.state.detail.coverImg} alt=''/>
				<img src={this.state.detail.coverImg} alt=''/>
				<img src={this.state.detail.coverImg} alt=''/>
			</div>
			<div className={detail.center}>
			<img src={this.state.detail.coverImg} alt=''/>
			</div>
			<div className={detail.right}>
			<img src={this.state.detail.coverImg} alt=''/>
			<p className={detail.p1}>款号:{this.state.detail._id}</p>
			<p className={detail.p2}>¥{this.state.detail.price}</p>
			<p>[促销]:<span onClick={()=>this.back()}className={detail.span}>特惠价</span></p>
			<Button  onClick={this.add.bind(this)} className={detail.button}>+购物袋</Button>
			<p className={detail.p3}>单笔消费满699包邮</p>
			</div>
			
		</div>	
		<div className='w'>
			<div className={detail.img}>
			<Carousel autoplay className={detail.lun}>
			    <div>
				<img src={this.state.detail.coverImg} alt=''/>
			    </div>
				<div>
				<img src={this.state.detail.coverImg} alt=''/>
				</div>
				<div>
				<img src={this.state.detail.coverImg} alt=''/>
				</div>
				<div>
				<img src={this.state.detail.coverImg} alt=''/>
				</div>
			</Carousel>
			</div>
			<div className={detail.right1}>
				<p className={detail.p}>设计<br/><span className={detail.span1}>{this.state.detail.name}</span></p>
				<p className={detail.p}>成分含量<br/><span className={detail.span1}>{this.state.detail.descriptions}</span></p>
				<p className={detail.p}>上市日期<br/><span className={detail.span1}>{new Date(this.state.detail.createdAt).toLocaleDateString()}</span></p>
				<p className={detail.p}>库存<br/><span className={detail.span1}>{this.state.detail.quantity}</span></p>
				<p className={detail.p}>洗涤方式</p>
				<div className={detail.imgbox}>
				<img src="//img03.taobaocdn.com/imgextra/i3/685140573/T2mkY5Xk8aXXXXXXXX_!!685140573.gif" alt=''/>
				<img src="//img02.taobaocdn.com/imgextra/i2/685140573/T2N2AlXo4aXXXXXXXX_!!685140573.gif" alt=''/>
				<img src="//img01.taobaocdn.com/imgextra/i1/685140573/T22.v7Xh4aXXXXXXXX_!!685140573.gif" alt=''/>
				<img src="//img02.taobaocdn.com/imgextra/i2/685140573/T2KV.zXf4aXXXXXXXX_!!685140573.gif" alt=''/>
				<img src="//img02.taobaocdn.com/imgextra/i2/685140573/T26O7zXoXXXXXXXXXX_!!685140573.gif" alt=''/>
				<img src="//img03.taobaocdn.com/imgextra/i3/685140573/T2gByUXeRbXXXXXXXX_!!685140573.gif" alt=''/>
				<img src="//img01.taobaocdn.com/imgextra/i1/685140573/T26AgzXglXXXXXXXXX_!!685140573.gif" alt=''/>
				<img src="//img03.taobaocdn.com/imgextra/i3/685140573/T2y2cyXgNaXXXXXXXX_!!685140573.gif" alt=''/>
				<img src="//img04.taobaocdn.com/imgextra/i4/685140573/T2r87yXmNaXXXXXXXX_!!685140573.gif" alt=''/>
				
				</div>
				<p>装饰工艺部位不可揉搓,不可熨烫<br/></p>
			</div>
		</div>
		</div>
		)
	}
	
}